//建立模拟数据库
const arr = [
  { id: 2, name: "q.jpg", goods_id: "食品酒水" },
  { id: 3, name: "q1.jpg", goods_id: "童装玩具" },
  { id: 4, name: "q2.jpg", goods_id: "家装建材" },
  { id: 5, name: "q3.jpg", goods_id: "奶粉尿裤" },
];
//获取标签变量
const oBanner = document.querySelector(".banner");
const oUl = oBanner.querySelector("ul");
const oOl = oBanner.querySelector("ol");
const leftBtn = document.querySelector(".leftBtn");
const rightBtn = document.querySelector(".rightBtn");
//定义变量
let ulStr = "";
let olStr = "";
let length = arr.length;
//动态生成页面
arr.forEach(function (item, key) {
  ulStr += `
  <li>
  <a href="./list2.html?id=${item.goods_id}">
   <img src="../img/images/${item.name}" alt="" />
   </a> 
   </li>`;
  olStr +=
    key == 0
      ? `<li class='active'  index='${key}'></li>`
      : `<li  index='${key}'></li>`;
});
//写入页面
oUl.innerHTML = ulStr;
oOl.innerHTML = olStr;
//获取生成的ul>li 和 ol>li
let ulList = oBanner.querySelectorAll("ul>li");
let olList = oBanner.querySelectorAll("ol>li");
//将第一张图片克隆，放到最后一张
let firstColon = ulList[0].cloneNode(true);
oUl.appendChild(firstColon);
//定义li宽度变量，并且将生成新的ul宽度
let liWidth = ulList[0].offsetWidth;
oUl.style.width = liWidth * (length + 1) + "px";

//鼠标移入 移出事件
oBanner.addEventListener("mouseover", function () {
  clearInterval(tim);
});
oBanner.addEventListener("mouseleave", function () {
  tim = setInterval(function () {
    rightBtn.click();
  }, 2000);
});

//鼠标点击小圆圈，图片跟随滑动
//循环遍历，给每个小ol>li添加点击事件
olList.forEach(function (item, key) {
  item.addEventListener("click", function () {
    //首先将所有的小li的背景色样式去除
    for (let i = 0; i < length; i++) {
      olList[i].classList.remove("active");
    }
    //只给当前点击的li添加背景样式
    this.classList.add("active");
    //获取当前点击的小li的索引号
    let index = item.getAttribute("index");
    num = index;
    circle = index;
    //调用move函数，将图片进行滑动
    move(oUl, { left: -liWidth * index });
  });
});

//定义变量 记录当前索引号
let num = 0;
let circle = 0;
let bool = true; //节流阀
//鼠标点击右按钮事件
rightBtn.addEventListener("click", function () {
  if (bool) {
    bool = false;
    if (num == length) {
      oUl.style.left = 0;
      num = 0;
    }
    num++;
    move(oUl, { left: -liWidth * num }, function () {
      bool = true;
    });
    circle++;
    if (circle == length) {
      circle = 0;
    }
    //将对应索引号下的小li背景色对应
    for (let i = 0; i < length; i++) {
      olList[i].classList.remove("active");
    }
    olList[circle].classList.add("active");
  }
});

//鼠标点击左按钮事件
leftBtn.addEventListener("click", function () {
  if (bool) {
    bool = false;
    if (num == 0) {
      oUl.style.left = -liWidth * length + "px";
      num = length;
    }
    num--;
    move(oUl, { left: -liWidth * num }, function () {
      bool = true;
    });
    if (circle == 0) {
      circle = length;
    }
    circle--;
    //将对应索引号下的小li背景色对应
    for (let i = 0; i < length; i++) {
      olList[i].classList.remove("active");
    }
    olList[circle].classList.add("active");
  }
});

//自动播放事件(即自动调用向右点击事件)
tim = setInterval(function () {
  rightBtn.click();
}, 2000);

//运动函数
function move(ele, obj, callBack) {
  //for in 循环拿到obj里的属性
  // clearInterval(ele.timer);
  for (let type in obj) {
    let endValue = obj[type];
    //定时器
    ele.timer = setInterval(function () {
      //初始值
      let startValue = parseInt(window.getComputedStyle(ele)[type]);
      //步长
      let step = (endValue - startValue) / 10;
      step = step > 0 ? Math.ceil(step) : Math.floor(step);
      startValue += step;
      if (startValue == endValue) {
        clearInterval(ele.timer);
        if (callBack) {
          callBack();
        }
      }
      ele.style[type] = startValue + "px";
    }, 20);
  }
}
